<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<title>权限管理</title>
<head th:replace="common/common_header" />
<link rel="stylesheet" type="text/css"
	th:href="@{~/thirdlib/jquery.ztree/zTreeStyle.css}" />
<style>
#progress_bar {
	margin: 10px 0;
	padding: 3px;
	border: 1px solid #000;
	font-size: 14px;
	clear: both;
	opacity: 0;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	-webkit-transition: opacity 1s linear;
}

#progress_bar.loading {
	opacity: 1.0;
}

#progress_bar .percent {
	background-color: #99ccff;
	height: auto;
	width: 0;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<header th:replace="common/header :: header">Header</header>
		<aside th:replace="common/left :: left">left</aside>

		<div class="content-wrapper">
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>文件上传测试</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">Home</a></li>
								<li class="breadcrumb-item active">文件上传测试</li>
							</ol>
						</div>
					</div>
				</div>
			</section>

			<section class="content">
				<div class="row">
					<label>普通fileUpload 上传测试 --> MultipartFile方式</label>
					<form th:action="@{/demo/auth/file/multipartUpload}" method="post" id="taskUploadFile" 
						enctype="multipart/form-data" onsubmit="return submitForm()">
						<input type="file" id="files" name="file" /> <input type="submit"
							value="提交上传" />
					</form>
				</div>
				<div class="row">
					<label>XMLHttpRequest 上传测试</label>
					<form enctype="multipart/form-data">
						<input type="file" id="files1" name="file" />
						<input type="button" value="提交上传" onclick="XMLHttpClick()"/>
					</form>
				</div>
				<div class="row">
					<input type="file" id="files" name="file" />
					<button onclick="abortRead();">取消读取</button>
				</div>
				<div id="progress_bar">
					<div class="percent">0%</div>
				</div>
				<div class="row">
					<label>拖放操作</label>
					<div id="drop_zone"
						style="width: 100px; height: 100px; border: 1px solid #000">拖到这里</div>
					<output id="list"></output>
				</div>
				<div class="row">
					<label>文件分片</label>
				</div>
			</section>
		</div>

		<div class="modal fade" id="roleModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabelReport" aria-hidden="true">
			<div id="dialogId" class="modal-dialog"
				style="background-color: #f5f7fa; width: 1020px;"></div>
		</div>

		<div class="modal fade" id="userModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabelReport" aria-hidden="true">
			<div id="dialogId" class="modal-dialog"
				style="background-color: #f5f7fa; width: 1020px;"></div>
		</div>

		<footer th:replace="common/footer :: footer">footer</footer>

		<!-- Control Sidebar -->
		<div class="control-sidebar-bg"></div>
	</div>
	<div th:replace="common/common_foot :: foot"></div>
	<script th:src="@{~/js/auth/fileUpload.js}"></script>
	<script th:src="@{~/thirdlib/jquery/jquery.form.js}"></script>
</body>
</html>
